import React from 'react';
import base64url from "base64url";
import { connect } from 'dva'
import { routerRedux } from 'dva/router';
import { Icon, List, WhiteSpace, InputItem, Button} from 'antd-mobile';
import Rank from './../../Mine/rankListIteam/ranklistPerson'
import { createForm } from 'rc-form';
import styles from './grjf.less';



const Item = List.Item;
const Brief = Item.Brief;
const empty = require('is-empty');
class grjf extends React.Component{

  constructor(props){
    super(props);
    this.state={
      rank:false,
    }
  }

  //积分页面切换
  pointChange =()=>{
    this.setState({
      rank:false,
    })
  };
  pointChange2 =()=>{
    this.setState({
      rank:true,
    })
  };

  render(){

    const personRank =[
      {'rank':'1','Name':'aaa','orgName':'qqqqqq','Integral':'852','lv':'18'},
      {'rank':'2','Name':'aaa','orgName':'qqqqqq','Integral':'852','lv':'16'},
      {'rank':'3','Name':'aaa','orgName':'qqqqqq','Integral':'852','lv':'15'},
      {'rank':'4','Name':'aaa','orgName':'qqqqqq','Integral':'852','lv':'14'}];

    return(
      <div>
        {/*<NavBarItem title="积分"/>*/}
        <div className={styles.topPoint}>
          <p style={{textAlign:'right',fontSize:'0.25rem'}}>
            <div style={{float:'right',marginRight:'0.05rem'}}>如何获取积分</div> &nbsp;
            <div style={{float:'right',marginRight:'0.05rem'}}>
              <Icon type='check-circle' size='xxs' style={{color:'yellow'}}/>
            </div>
          </p>
          <div>
            <div className={styles.pointTOPleft} onClick={this.pointChange}>
              <div style={{fontSize:'1rem'}}>689</div>
              <div>当前总积分</div>
            </div>
            <div className={styles.pointTOPleft} onClick={this.pointChange2}>
              <div style={{fontSize:'1rem'}}>6</div>
              <div>当前排行</div>
            </div>
          </div>
        </div>

        {
          !this.state.rank ?
            <div>
              <List className="my-list"  renderHeader={() => '积分明细'}>
                <Item extra={<div style={{fontSize:'0.6rem',color:'#0DBD0B',fontWeight:'bolder'}}>+30</div>} >
                  转发党建资讯，通知公告 <Brief>2017-10-07 10:23:12</Brief>
                </Item>
                <Item extra={<div style={{fontSize:'0.6rem',color:'#0DBD0B',fontWeight:'bolder'}}>+30</div>} >
                  转发党建资讯，通知公告 <Brief>2017-10-07 10:23:12</Brief>
                </Item>
                <Item extra={<div style={{fontSize:'0.6rem',color:'#0DBD0B',fontWeight:'bolder'}}>+30</div>} >
                  转发党建资讯，通知公告 <Brief>2017-10-07 10:23:12</Brief>
                </Item>
                <Item extra={<div style={{fontSize:'0.6rem',color:'#0DBD0B',fontWeight:'bolder'}}>+30</div>} >
                  转发党建资讯，通知公告 <Brief>2017-10-07 10:23:12</Brief>
                </Item>
              </List>
            </div>
            :
            <div>
              <List className="my-list"  renderHeader={() => `我的等级:LV${18}` }>
                {
                  personRank.map((item, key) => (
                      <List key={key} className="my-list">
                        <Rank rank={key+1}
                              org={item.orgName}
                              name={item.Name}
                              point6={item.Integral}
                              lv={item.lv}
                        />
                      </List>
                    )
                  )
                }
              </List>
            </div>
        }

        <div>

        </div>

      </div>
    )
  }
}
const Form = createForm()(grjf);
function mapStateToProps({manualMember}) {
  return {manualMember}
}
export default connect(mapStateToProps)(Form);
